<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" style="height: 68%;" @tab-click="handleClick">
      <el-tab-pane label="作业" name="first">
        <div class="layout">
      	<div class="layout-content">
          <el-row>
      	     <font size="5">Kettle作业列表</font>
          <!--
      	  <div class="layout-button1" >
      	   <el-button type="primary" plain size="small" icon="el-icon-check">执行</el-button>
      	   <el-button type="primary" plain size="small" icon="el-icon-location-outline">停止</el-button>
      	  </div>-->
      	    <div class="layout-button2">
      	     <el-button type="primary" plain size="small" icon="el-icon-plus" @click="dialogVisible1=true">增加</el-button>
      	     <el-button type="primary" plain size="small" icon="el-icon-minus" :disabled="this.sels.length == 0" @click="delGroup()" 
      	     >删除</el-button>
      	    </div> 
          </el-row>     	
      	  <!--kettle作业列表-->
      	  <el-table :data="KettleJobTable" border highlight-current-row  style="width: 100%; margin-top:0.5%;"  @row-click="handleCurrentChange" @selection-change="selsChange" ref="table">
      	  	<el-table-column type="selection" width="55" reserve-selection=""></el-table-column>  
            <el-table-column  prop="target_table" label="作业名称"  align="center">
            </el-table-column>
            <el-table-column  prop="description" label="作业描述" width="200"  align="center">
            </el-table-column>
            <el-table-column prop="status" label="作业状态"  align="center">
            </el-table-column>
            <el-table-column prop="create_date" label="创建时间" align="center">
            </el-table-column>
            <el-table-column prop="recently_run_date" label="最近执行时间" align="center">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150px" align="center">
             <template slot-scope="scope">
              <el-button type="primary" plain size="small"  @click="excuteJOb(scope.row)">
              执行
              </el-button>
              <el-button type="primary" plain size="small" @click="stopJob(scope.row)" >
              停止
              </el-button>
             </template>
            </el-table-column>
            <el-table-column fixed="right" label="日志" width="70" align="center">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">                  
                  <p> {{ scope.row.log}}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag hit>日志</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>             
          </el-table>
         <span> {{ids}}</span>


          <!--增加作业弹窗-->
          <el-dialog width="40%" title="新增kettle作业" :visible.sync="dialogVisible1" size="tiny">
           <el-form :model="addForm">
            <el-form-item label="作业描述" :label-width="FormLableWidth">
              <el-input v-model="addForm.description" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="抽取规则" :label-width="FormLableWidth">
              <el-select v-model="addForm.rule" filterable placeholder="请选择" @focus="focusClick()">
              	   <el-option
                   v-for="item in options"
                   :key="item.target_table_id"
                   :label="item.target_table"
                   :value="item.target_table_id">
                   </el-option>
              </el-select>
            </el-form-item>
           </el-form>
           <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="addJobPost()">确 定</el-button>
            </span>
          </el-dialog>
          <!--批量删除作业弹窗-->
          <el-dialog width="40%" title="批量删除作业" :visible.sync="dialogVisible2" >
            <el-form >
              <span class="des">确认删除所选作业吗</span>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="deleteJobsPost()">确 定</el-button>
            </span>
          </el-dialog>

        </div>
         <!--删除单个作业弹窗-->
          <el-dialog width="40%" title="删除作业" :visible.sync="dialogVisible4" >
            <el-form >
              <span class="des">确认删除该作业吗</span>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible4 = false">取 消</el-button>
              <el-button type="primary" @click="">确 定</el-button>
            </span>
          </el-dialog>   
          <!--需要刷新的操作反馈提示-->    
          <el-dialog width="30%" title="提示" :visible.sync="dialogVisible5" >
            <el-form >
              <span class="des">{{information}}</span>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible5 = false">取 消</el-button>
              <el-button type="primary" @click="submit()">确 定</el-button>
            </span>
          </el-dialog>
          <!--需要刷新的操作反馈提示-->   
          <el-dialog width="30%" title="提示" :visible.sync="dialogVisible6" >
            <el-form >
              <span class="des">{{info}}</span>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible6 = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane label="调度" name="second">
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
data(){
	return{
		activeName:'first',//标签导航栏默认
		//kettle作业列表
		KettleJobTable:[],
		FormLableWidth:'100px',
		sels:[],//纪录已勾选的
		ids:'',//将已勾选的id拼接
		jobId:'',//暂存所选jobID
		//作业板块新增弹窗映射关系选择
		options: [],
    addForm:{
        	description:'',
        	rule:''
    },
    dialogVisible1:false,//作业板块新增弹窗
    dialogVisible2:false,//作业板块批量删除弹窗
    //dialogVisible3:false,//作业板块日志弹窗
    dialogVisible4:false,//作业板块单个删除弹窗
    dialogVisible5:false,//作业板块反馈信息提示
    dialogVisible6:false,
    logText:'日志信息1\n日志信息2\n日志信息3',
    information:'',
    info:'',


   }
 },
   created () {
    this.initSource();
 },
 methods:{
  //初始化作业列表
  initSource(){
    let vm=this;
    vm.sels=[];
    vm.ids="";
    let params={
      page:"1",
      pageSize:"10"
    }
    axios.post('/ETLJob/getETLJobListByPage',params,{headers: {'content-type': 'application/json'}})
    .then(function(response){
    console.log(response);
    console.log(response.data.data);
    if(response.data.result==true)
    	vm.KettleJobTable=response.data.data;
    else
      vm.KettleJobTable=[];
    })
    .catch(function(error){
    console.log(error);
    })    
  },
    //增加按钮触发
  focusClick(){
    let vm=this;
    axios.get('/ETLJob/queryTargetTableIdAndName')
    .then(function(response){
    console.log(response);
    console.log(response.data.data);
    if(response.data.result==true)
    {
      vm.addForm.rule=response.data.data[0]
      vm.options=response.data.data;
    }
    else{
        vm.options=[];
        vm.dialogVisible6=true;
        vm.info="暂无最新抽取规则";
      } 
    })
    .catch(function(error){
    console.log(error);
    })
  },
  //新增提交
  addJobPost(){
    let vm=this;
    var ruleId=vm.addForm.rule;
    ruleId=String(ruleId);
    console.log(vm.addForm.rule);
    console.log(vm.addForm.description);
    let params={
      target_table_id:ruleId,
      description:vm.addForm.description
    }
     axios.post('/ETLJob/insertETLJob',params)
      .then(function(response){
        console.log(response);
        console.log(response.data);
        vm.dialogVisible5=true;
        if(response.data.result==true){
          vm.information="新增作业成功";
        }
        else{        
          vm.information="新增作业失败";
        } 
      })
      .catch(function(error){
      console.log(error);
      }) 
      vm.addForm.rule="";
      vm.addForm.description="";  
  },
  excuteJOb(row){
    console.log(this.sels);
    console.log(row.target_table_id);
    let vm=this;
    var targetId=row.target_table_id;
    targetId=String(targetId);
    let params={
      target_table_id:targetId
    }
    axios.post('/ETLJob/executeETLJob',params,{headers: {'content-type': 'application/json'}})
    .then(function(response){
    console.log(response);
    console.log(response.data);
    vm.dialogVisible5=true;
    if(response.data.result==true){
      vm.information="执行作业成功";
    }
    else{        
      vm.information="执行作业失败";
    } 
    })
    .catch(function(error){
    console.log(error);
    })
  },
  stopJob(row){
    let vm=this;
    var targetId=row.target_table_id;
    targetId=String(targetId);
    let params={
      target_table_id:targetId
    }
    axios.post('/ETLJob/stopETLJob',params,{headers: {'content-type': 'application/json'}})
    .then(function(response){
    console.log(response);
    console.log(response.data);
    vm.dialogVisible5=true;
    if(response.data.result==true){
      vm.information="停止作业成功，该作业已回退到未执行前";
    }
    else{        
      vm.information="停止作业失败";
    } 
    })
    .catch(function(error){
    console.log(error);
    })
  },
  //删除勾选作业
  deleteJobsPost(){
    console.log(this.ids);    
    let vm=this;
    let params={
      ids:vm.ids
    }
    axios.post('/ETLJob/deleteETLJobs',params,{headers: {'content-type': 'application/json'}})
    .then(function(response){
    console.log(response);
    console.log(response.data);
    vm.dialogVisible5=true;
    if(response.data.result==true){
      vm.information="删除作业成功";
    }
    else{        
      vm.information="删除作业失败";
      } 
    })
    .catch(function(error){
    console.log(error);
    })   
  },
  //提示框确定
  submit(){
   this.dialogVisible5=false;
   this.dialogVisible1=false;
   this.dialogVisible2=false;
   this.initSource();   
  },

  //标签导航的点击
 	handleClick(tab, event) {
      console.log(tab, event);
    },
    //勾选计数初始化
    selsChange(sels) {  
      this.sels = sels  
    }, 
    //表格勾选
    handleCurrentChange(row, event, column) {  
      this.$refs.table.toggleRowSelection(row)  
    },
    //批量删除触发
    delGroup() {  
       console.log("删除");
       console.log(this.sels);
       this.dialogVisible2=true;
       this.ids = this.sels.map(item => item.target_table_id).join()//获取所有选中行的id组成的字符串，以逗号分隔  
    },

    //deleteJob(row){
    //	this.jobId=row.id;
    //	this.dialogVisible4=true;

    //}

 }

}
</script>

<style>
.layout{
  background: #EBEEF5;
  overflow-y: scroll;
}
.layout-content{
  padding: 2% 0 0 0;
  margin-left: 5%;
  margin-right: 5%;
  min-height: 300px;

}

.layout-button2{
   position:absolute;
   top:10%; 
   left:80%;
   width: 15%;
}
.des{
	font-size: 20px;
}

</style>
